<template>
	<view class="root">
		<video
		 :class="videoType"
		 id="video"
		 src="http://lxtest.demotolearn.cn/1.mp4"
		 :controls="false"
		 @loadedmetadata="videoload"
		 @ended="videoEnd"
		 @timeupdate="videoplaying"
		 :volume="volume/100" 
		 :show-center-play-btn="false"
		  :enable-progress-gesture="false"
		 @click="isShowControls=!isShowControls"
		></video>
		<view class="vertical_nav" v-if="isShowControls&&videoType=='vertical'" @click.stop="">
			<view class="playBtn" @click="playVideo">
				<up-icon name="play-right-fill" color="#fff" size="34rpx" v-if="videoStatus=='0'"></up-icon>
				<up-icon name="pause" color="#fff" size="34rpx" v-if="videoStatus=='1'"></up-icon>
			</view>
			<view class="slider">
				<up-slider @click="tapSilder" @changing="changingSlider" v-model="nowNum" :max="allTime" inactiveColor="#fff" blockColor="#fff" activeColor="#439F5B"></up-slider>
			</view>
			<view class="videoNum">
				<text>{{formatTime(showAlltime)}}</text>
			</view>
			<up-icon name="photo" color="#fff" size="45rpx"></up-icon>
		</view>
		<view class="horizontal_nav" v-if="isShowControls&&videoType=='horizontal'" @click.stop="">
			<view class="playBtn" @click="playVideo">
				<up-icon name="play-right-fill" color="#fff" size="34rpx" v-if="videoStatus=='0'"></up-icon>
				<up-icon name="pause" color="#fff" size="34rpx" v-if="videoStatus=='1'"></up-icon>
			</view>
			<view class="slider">
				<pp-slider 
				        :vertical="true" 
						:value="nowNum"
				        :max="allTime"
						activeColor="#439F5B"
				        @changing="changingSlider" />
			</view>
			<view class="videoNum">
				<text style="writing-mode: sideways-rl;">{{formatTime(showAlltime)}}</text>
			</view>
			<up-icon name="photo" color="#fff" size="45rpx" style="transform: rotate(90deg);"></up-icon>
		</view>
	</view>
	<circletime :class="['circletime',videoType=='horizontal'?'horizontal_circletime':'']" :time="5" ref="circletimeRef" @closeTime="timeEnd"></circletime>
</template>

<script setup>
import {ref,nextTick} from "vue";
import {onLoad} from '@dcloudio/uni-app';
import circletime from "../details/components/circleTime.vue";
import ppSlider from "@/uni_modules/pp-slider/components/pp-slider/pp-slider.vue";
let volume=ref(100);
let nowNum=ref(0);
let videoContext=ref(null);
let videoType=ref("vertical");
let allTime=ref(100);
let showAlltime=ref(0);
const circletimeRef=ref(null);
let videoStatus=ref("0");
let isShowControls=ref(true);
onLoad(()=>{
	videoContext.value=uni.createVideoContext('video');
})
function videoload(event){
	videoContext.value=uni.createVideoContext('video');
	allTime.value=parseInt(event.detail.duration);
	showAlltime.value=parseInt(event.detail.duration);
	if(event.detail.width>event.detail.height){
		videoType.value="horizontal"
	}else{
		videoType.value="vertical"
	}
}
function formatTime(time){
	let t=Number(time);
	const gap=60;
	const Minutes=parseInt(t/gap);
	const getSeconds=t-(Minutes*gap);
	return `${Minutes}:${getSeconds>=10?getSeconds:'0'+getSeconds}`;
}
function playVideo(){
	if(videoStatus.value=='0'){//当前暂停中，点击后播放视频
		circletimeRef.value.hideShow();
		videoContext.value.play();
		videoStatus.value="1";
	}else{
		videoContext.value.pause();
		videoStatus.value="0";
		circletimeRef.value.openShow();
	}
}
function videoEnd(){
	videoStatus.value="0";
}
function tapSilder(){
	videoContext.value.seek(nowNum.value);
}
function changingSlider(e){
	videoContext.value.seek(e);
}
function videoplaying(event){
	showAlltime.value=parseInt(event.detail.duration)-parseInt(event.detail.currentTime);
	nowNum.value=parseInt(event.detail.currentTime);
}
function timeEnd(){
	playVideo();
}
</script>

<style lang="less" scoped>
.root{
	height: 100vh;
	overflow: hidden;
	video{
		position: relative;
		z-index: 1;
	}
	.horizontal{
		top: -100vw;
		width: 100vh;
		height: 100vw;
		transform: rotate(90deg);
		transform-origin: bottom left;
	}
	.vertical{
		width: 100%;
		height: 100vh;
	}
	.vertical_nav{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: linear-gradient(0deg,#515151 0%,transparent 100%);
		z-index: 9;
		padding: 12rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.playBtn{
			min-width: 67rpx;
			max-width: 67rpx;
			width: 67rpx;
			height: 67rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: #439F5B;
			border-radius: 7rpx;
		}
		.slider{
			flex: 1;
		}
		.videoNum{
			font-size: 37rpx;
			color: #FFFFFF;
			margin-right: 14rpx;
			padding-bottom: 8rpx;
		}
	}
	.horizontal_nav{
		position: fixed;
		left: 0;
		top: 0;
		width: 80rpx;
		height: 100vh;
		background: linear-gradient(90deg,#515151 0%,transparent 100%);
		z-index: 9;
		padding: 12rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		transform-origin: bottom left;
		.playBtn{
			min-width: 67rpx;
			max-width: 67rpx;
			width: 67rpx;
			height: 67rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: #439F5B;
			border-radius: 7rpx;
			transform: rotate(90deg);
		}
		.slider{
			flex: 1;
			margin-top: 16rpx;
			margin-bottom: 30rpx;
		}
		.videoNum{
			font-size: 37rpx;
			color: #FFFFFF;
			margin-right: 0rpx;
			padding-bottom: 8rpx;
		}
	}
}
:deep(.circletime){
	.main{
		top: 50% !important;
		left: 50% !important;
		transform: translateX(-100%) translateY(-50%) !important;
	}
}
:deep(.horizontal_circletime){
	.main{
		transform: translateX(-100%) translateY(-50%) rotate(90deg) !important;
	}
}
</style>